<script setup>
    import { reactive, computed } from 'vue';

    const author = reactive({
        name: 'John Doe',
        books: [
            'Book 1',
            'Book 2',
            'Book 3',
        ]
    });

    const publishBooksMessge = computed(() => {
        return author.books.length > 0 ? 'Yes' : 'No';
    });
</script>

<template>
    <h1>计算属性</h1>
    <p>Has publish books:</p>
    <span>{{ publishBooksMessge }}</span>
</template>
